<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="Styles/image.css"/>
        <title><{'PROJECT_TITLE'|C}></title>
    </head>
    <body>
        <div class="image-dialog-container">
            <form action="<{"image"|U}>" method="post" id="form" enctype="multipart/form-data">
                <input type="hidden" name="dir" value="test2"/>
                <input type="hidden" name="url" id="url"/>
                <input type="hidden" name="width"/>
                <input type="hidden" name="height"/>
                <div class="image-dialog-file">
                    文件选择：<input type="file" name="upfile" id="file"/><span class="button">上传</span>
                </div>
                <div class="image-dialog-image">
                    <!--添加图片预览代码-->
                    <img src="Uploads/test2/13894555887132.png" style="width: 300px;height: 200px;position: absolute;top: 50px;left: 0;">
                </div>
                <div class="image-dialog-select">
                    <div class="image-dialog-content">
                        裁切方式：<select id="type" name="type">
                            <option value="1" selected="selected">自动裁切</option>
                            <option value="2">自适应缩放</option>
                            <option value="3">手动裁切</option>
                        </select>
                    </div>
                    <div class="image-dialog-content">裁切位置：</div>
                    <input type="hidden" name="pos" value="5" id="pos"/>
                    <div class="image-dialog-location" id="location">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <div class="image-dialog-text"></div>

                </div>
            </form>
        </div>
        <!--[if lt IE 9]>
        <script type="text/javascript" src="Scripts/lib/json2.js"></script>
        <![endif]-->
        <!--[if IE 6]>
        <script type="text/javascript" src="Scripts/lib/jquery-bgiframe.js"></script>
        <script type="text/javascript" src="Scripts/lib/pngfix.js"></script>
        <script type="text/javascript">
            DD_belatedPNG.fix('.frame-banner,.frame-logo');
        </script>
        <![endif]-->
        <script type="text/javascript" src="Scripts/lib/jquery.js"></script>
        <script type="text/javascript" src="Scripts/lib/jquery-form.js"></script>
        <script>
            var locationDiv = $("#location");
            locationDiv.children("div").each(function (i) {
                $(this).click(function () {
                    var type = parseInt($("#type").val());
                    if (type === 0 || type === 3) {
                        return;
                    }
                    $("#pos").val(i + 1);
                    locationDiv.css("background-image", 'url("Images/imagedialog/' + (i + 1) + '.png")');
                });
            });
            //            $("#reset").click(function () {
            //                $("#form").resetForm();
            //                $("#file").attr("disabled", false).show();
            //                $("#update").show();
            //            });
            //            $("#update").click(function () {
            //                $("#form").ajaxSubmit({
            //                    cache: false,
            //                    type: "post",
            //                    success: function (data) {
            //                        try {
            //                            data = JSON.parse(data);
            //                        } catch (e) {
            //                            alert(data);
            //                            return;
            //                        }
            //                        if (!data.success) {
            //                            alert(data.message);
            //                            return;
            //                        }
            //                        $("#file").attr("disabled", true).hide();
            //                        $("#url").val(data.url);
            //                        $("#update").hide();
            //                    },
            //                    error: function () {
            //                        alert("上传文件出错");
            //                    }
            //                });
            //            });
            //            $("#submit").click(function () {
            //                $("#form").ajaxSubmit({
            //                    cache: false,
            //                    type: "post",
            //                    success: function (data) {
            //                        try {
            //                            data = JSON.parse(data);
            //                        } catch (e) {
            //                            alert(data);
            //                            return;
            //                        }
            //                        if (!data.success) {
            //                            alert(data.message);
            //                            return;
            //                        }
            //                        $(document.body).append("<img src='" + data.url + "' />");
            //                    },
            //                    error: function () {
            //                        alert("上传文件出错");
            //                    }
            //                });
            //            });
        </script>
    </body>
</html>